import React, {Component} from 'react';
import {ActivityIndicator, AsyncStorage, Image, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import AppConfigs from '../constacts/AppConfig'
import MD5Utils from '../utils/MD5Utils';
import NetUtils from '../utils/NetUtils';

const APPKEY = AppConfigs.APPKEY;
let appsecret =AppConfigs.APPSECRET;
const url = AppConfigs.URL;
var that;
function normal() {
    return (
        <View style={MyStyles.contain}>
            <View style={MyStyles.headimge}>
                <Image source={require('../images/user.png')} style={{
                    width: 83, height: 83,
                    marginTop: 40, marginBottom: 40
                }}/>
                <Text style={{marginBottom: 40, fontSize: 30, color: 'green'}}>{this.state.result.loginName}</Text>
            </View>
            <View style={MyStyles.c}>
                <Text style={{width: 100}}>部门：</Text>
                <Text style={{width: 150}}>{this.state.result.officename}</Text>
            </View>
            <View style={MyStyles.c}>
                <Text style={{width: 100}}>电话：</Text>
                <Text style={{width: 150}}>{that.state.result.mobile}</Text>
            </View>
            <View style={MyStyles.c}>
                <Text style={{width: 100}}>手机：</Text>
                <Text style={{width: 150}}>{this.state.result.phone}</Text>
            </View>
            <TouchableHighlight onPress={this.delData} underlayColor='#FFFFFF'>
                <View style={MyStyles.btn}>
                    <Text>退出登录</Text>
                </View>
            </TouchableHighlight>
        </View>
    )
}
export  default class Userinfos extends Component{
    /**
     * 退出登录删除缓存
     */
    delData(){
        AsyncStorage.removeItem("mobile",(error)=>{
            that.setState({
                num:""
            })
            // alert("删除成功"+that.state.num);
            // const { goBack } = this.props.navigation;
            // goBack(null);
        })
    };
    constructor(props){
        super(props);
        that=this;
        this.state={
          result:{},
            isShow:null,
            num:""
        };
    }
    static navigationOptions = {
        tabBarLabel: '个人中心',
        // Note: By default the icon is only shown on iOS. Search the showIcon option below.
        showIcon:true,
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('../images/icon_personal_h.png')}
                style={{width:30,height:30}}
            />
        ),
    };
    /**
     * 请求网络数据
     */
    initData(){
        this.setState({
            isShow:true
        })
        var r=null;
      let FromData=new FormData();

        alert("----------"+that.state.num);
        FromData.append("mobile",that.state.num);
        FromData.append("appkey",APPKEY);
        FromData.append("viewtype",7);
        let time=new Date().getTime();
        var str = 'test' + appsecret + time;
        let appsign=MD5Utils(str);
        FromData.append("appsign",appsign);
        FromData.append("date",time);
        NetUtils.post(url,FromData,(json)=>{
             r = JSON.parse(json.errorMsg);
            that.setState({
                result:r,
                isShow:false
            });
            console.log("---------"+json.errorMsg);
            console.log("====="+typeof(that.state.result) );
            // alert("用户信息："+json.errorMsg);
        })

    }

    /**
     * 渲染UI之前的方法
     */
    componentWillMount(){
        AsyncStorage.getItem("mobile",(error,text)=>{
            // alert("---获取保存的数据--"+text);
            this.setState({
                num:text
            })
            this.initData();
        })

    }
    render(){
        if(this.state.isShow){
            return(
                <ActivityIndicator/>
            )
        };
        return normal.call(this);
    }


}
const MyStyles=StyleSheet.create({
    contain:{
        flex:1,
        alignItems:'center',
        backgroundColor:'#FFFFFF'

    },
    btn:{
        alignItems:'center',
        justifyContent:"center",
        marginTop:20,
        width:300,
        height:50,

        backgroundColor:'green'

    },
    c:{
        flexDirection:'row',
        marginTop:20,

    },
    headimge:{

        width:'100%',
        alignItems:'center',
        backgroundColor:'gray'
    }

})